<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/rights' }"
        >权限列表</el-breadcrumb-item
      >
    </el-breadcrumb>
    <br />

    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="rightsList" border stripe="" style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template v-slot="scope">
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
            <el-tag v-else-if="scope.row.level === '1'" type="success"
              >二级</el-tag
            >
            <el-tag v-else type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 底部页面切换区域 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pagenum"
          :page-sizes="[4, 8, 12, 15]"
          :page-size="pageInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightsList: [],
      pageInfo: {
        pagenum: 1,
        pagesize: 8,
      },
      total: 0,
    };
  },
  methods: {
    async getRightsList() {
      const { data: res } = await this.$http.get("rights/list",{
        params: this.pageInfo
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取权限列表失败");
      }
      this.rightsList = res.data;
      this.total = res.data.length;
      this.$message.success("获取用户列表成功");
      // console.log(this.rightsList)
    },

    //分页栏功能（点击后能改变显示的页面条数大小）
    //他这里方法自带实现 你一点击对应的分页条数 他就赋值它给size 就有值了
    handleSizeChange(newSize) {
      this.pageInfo.pagesize = newSize;
      this.pageInfo.pagenum = 1; // 在改变每页显示的条数时，要将页码显示到第一页
      this.getRightsList(); // 分页请求数据
    },
    // 分页--点击页
    handleCurrentChange(newPage) {
      this.pageInfo.pagenum = newPage;
      this.getRightsList();
    },

  },
  created() {
    this.getRightsList();
  },
};
</script>

<style scoped>
.pagination {
  /* 让该元素变为绝对定位，即对于浏览器窗口来定位 默认为往左边靠*/
  /* position: fixed; */
  /* 当我们给bottom和right时，就相当于改元素在绝对右下角，然后可以设置距离值 */
  /* bottom: 25px;
  right: 10px; */
  margin-left: 800px;
  margin-top: 10px;
}
</style>